<template>
  <div class="senior-search-div">
    <!-- 主题 -->
    <div style="height: 100%;">
      <div
        class="el-menu-vertical-demo"
        :style="{ width: menuWidth + 'px' }"
        :collapse="isCollapse"
      >
        <el-collapse
          v-show="!isCollapse"
          v-model="activeNames"
          @change="handleChange"
          class="search-select-list"
        >
          <el-collapse-item
            title="地理编码查询"
            name="1"
          >
            <div>
              <el-input
                style="width: 80%;"
                placeholder="搜索地点"
                class="search-input input-with-select"
                v-model="gencoderKey"
                clearable
                :trigger-on-focus="false"
                @keyup.enter.native="searchName()"
                @clear="clearResult('1')"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="searchName()"
                ></el-button>
              </el-input>
            </div>
            <div v-if="this.gencoderResult">
              <el-descriptions
                title="检索结果"
                :column="1"
              >
                <el-descriptions-item label="检索地点">
                  <el-link
                    :underline="false"
                    @click="gencoderLocation"
                  >{{ this.gencoderResult.keyWord }}
                    <i class="el-icon-location-information"></i>
                  </el-link>
                </el-descriptions-item>
                <el-descriptions-item label="类别名称">{{ this.gencoderResult.level }}</el-descriptions-item>
                <el-descriptions-item label="经度">{{ this.gencoderResult.lon }}</el-descriptions-item>
                <el-descriptions-item label="纬度">{{ this.gencoderResult.lat }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </el-collapse-item>
          <el-collapse-item
            title="逆地理编码查询"
            name="2"
          >
            <div>
              <el-input
                style="width: 80%;padding-bottom: 5px;"
                placeholder="经度"
                class="search-input input-with-select"
                v-model="coordinateLon"
                clearable
                :trigger-on-focus="false"
                @clear="clearResult('2')"
              ></el-input>
              <el-input
                style="width: 80%;"
                placeholder="纬度"
                class="search-input input-with-select"
                v-model="coordinateLat"
                clearable
                :trigger-on-focus="false"
                @keyup.enter.native="searchCoordinate()"
                @clear="clearResult('2')"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="searchCoordinate()"
                ></el-button>
              </el-input>
            </div>
            <div v-if="this.coordinateResult">
              <el-descriptions
                title="检索结果"
                :column="1"
              >
                <el-descriptions-item label="详细地址">
                  <el-link
                    :underline="false"
                    @click="coordinateLocation"
                  >{{ this.coordinateResult.formatted_address }}
                    <i class="el-icon-location-information"></i>
                  </el-link>
                </el-descriptions-item>
                <el-divider content-position="left">此点详细信息</el-divider>
                <el-descriptions-item label="此点最近地点信息">{{ this.coordinateResult.addressComponent.address }}</el-descriptions-item>
                <el-descriptions-item label="此点距离最近地点信息距离">{{ this.coordinateResult.addressComponent.address_distance }} 米</el-descriptions-item>
                <el-descriptions-item label="此点在最近地点信息方向">{{ this.coordinateResult.addressComponent.address_position }}</el-descriptions-item>
                <el-descriptions-item label="此点所在国家或城市或区县">{{ this.coordinateResult.addressComponent.city }}</el-descriptions-item>
                <el-descriptions-item label="距离此点最近信息点">{{ this.coordinateResult.addressComponent.poi }}</el-descriptions-item>
                <el-descriptions-item label="距离此点最近信息点的距离">{{ this.coordinateResult.addressComponent.poi_distance }} 米</el-descriptions-item>
                <el-descriptions-item label="此点在最近信息点的方向">{{ this.coordinateResult.addressComponent.poi_position }}</el-descriptions-item>
                <el-descriptions-item label="距离此点最近的路">{{ this.coordinateResult.addressComponent.road }}</el-descriptions-item>
                <el-descriptions-item label="此点距离此路的距离">{{ this.coordinateResult.addressComponent.road_distance }} 米</el-descriptions-item>
              </el-descriptions>
            </div>
          </el-collapse-item>
          <el-collapse-item
            title="行政区划查询"
            name="3"
          >
            <div>
              <el-input
                style="width: 80%;"
                placeholder="名称或编码"
                class="search-input input-with-select"
                v-model="governmentValue"
                clearable
                :trigger-on-focus="false"
                @keyup.enter.native="searchGovernment()"
                @clear="clearResult('3')"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="searchGovernment()"
                ></el-button>
              </el-input>
            </div>
            <div v-if="this.governmentResult">
              <el-descriptions
                title="检索结果"
                :column="1"
              >
                <el-descriptions-item label="名称">
                  <el-link
                    :underline="false"
                    @click="governmentLocation"
                  >{{ this.governmentResult.name }}
                    <i class="el-icon-location-information"></i>
                  </el-link>
                </el-descriptions-item>
                <el-descriptions-item label="行政区划码">{{ this.governmentResult.cityCode }}</el-descriptions-item>
                <el-descriptions-item label="行政区划等级">{{ this.governmentResult.level }}</el-descriptions-item>
                <el-descriptions-item label="经度">{{ this.governmentResult.lnt }}</el-descriptions-item>
                <el-descriptions-item label="纬度">{{ this.governmentResult.lat }}</el-descriptions-item>
                <el-descriptions-item label="四角坐标">{{ this.governmentResult.bound }}</el-descriptions-item>
                <el-descriptions-item label="行政区划类别(省市县)"><el-tag>{{ this.governmentResult.adminType | formatAdminType }}</el-tag></el-descriptions-item>
                <el-descriptions-item label="行政区划简称">{{ this.governmentResult.nameabbrevation }}</el-descriptions-item>
              </el-descriptions>
              <div v-if="this.governmentResult.parents">
                <el-divider content-position="left">上级行政区划信息</el-divider>

                <div v-if="this.governmentResult.parents.country"><el-descriptions :column="1">
                    <el-descriptions-item label="国家"></el-descriptions-item>
                    <el-descriptions-item label="名称">{{ this.governmentResult.parents.country.name }}</el-descriptions-item>
                    <el-descriptions-item label="行政区划码">{{ this.governmentResult.parents.country.cityCode }}</el-descriptions-item>
                  </el-descriptions></div>
                <div v-if="this.governmentResult.parents.province"><el-descriptions :column="1">
                    <el-descriptions-item label="省"></el-descriptions-item>
                    <el-descriptions-item label="名称"><el-link
                        :underline="false"
                        @click="selectCity(governmentResult.parents.province.name)"
                      >{{ this.governmentResult.parents.province.name }}</el-link></el-descriptions-item>
                    <el-descriptions-item label="行政区划码"><el-link
                        :underline="false"
                        @click="selectCity(governmentResult.parents.province.cityCode)"
                      >{{ this.governmentResult.parents.province.cityCode }}</el-link></el-descriptions-item>
                  </el-descriptions></div>
                <div v-if="this.governmentResult.parents.city"><el-descriptions :column="1">
                    <el-descriptions-item label="市"></el-descriptions-item>
                    <el-descriptions-item label="名称"><el-link
                        :underline="false"
                        @click="selectCity(governmentResult.parents.city.name)"
                      >{{ this.governmentResult.parents.city.name }}</el-link></el-descriptions-item>
                    <el-descriptions-item label="行政区划码"><el-link
                        :underline="false"
                        @click="selectCity(governmentResult.parents.city.cityCode)"
                      >{{ this.governmentResult.parents.city.cityCode }}</el-link></el-descriptions-item>
                  </el-descriptions></div>

              </div>
              <div v-if="governmentResult.child">
                <el-divider content-position="left">下级行政区划信息</el-divider>
                <div
                  v-for="ite in governmentChilds"
                  :key="ite.cityCode"
                  class="city-childs-item"
                >
                  <el-link
                    :underline="false"
                    @click="selectCity(ite.nameabbrevation)"
                  >
                    {{ ite.nameabbrevation }}
                  </el-link>
                </div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <!-- 图标 -->
    <div class="collapse-btn-div">
      <el-tooltip
        class="item"
        effect="dark"
        content="高级搜索"
        placement="right"
      >
        <el-button
          :icon="'el-icon-arrow-' + icon_direction"
          class="collapse-btn"
          @click="changeOpen"
        ></el-button>
      </el-tooltip>
    </div>
  </div>

</template>

<script>
import { tdtSearch, tdtGeocoder, tdtAdmin } from '@/api/tdt';

export default {
  data () {
    return {
      menuWidth: 0,
      // 是否水平折叠
      isCollapse: true,
      // 图标方向
      icon_direction: 'right',
      activeNames: ['1'],
      // 地理编码检索值
      gencoderKey: null,
      gencoderResult: null,
      // 逆地理编码检索值(经纬度)
      coordinateLon: null,
      coordinateLat: null,
      coordinateResult: null,
      // 行政区划检索值
      governmentValue: null,
      governmentResult: null,
      governmentChilds: [],
    }
  },
  methods: {
    changeOpen () {
      // 当前折叠状态
      if (this.isCollapse) {
        // 整个页面的20%,至少320px
        this.menuWidth = document.body.clientWidth * 0.2 > 320 ? document.body.clientWidth * 0.2 : 320;
        this.icon_direction = 'left';
      } else {
        this.menuWidth = 0;
        this.icon_direction = 'right';
      }
      this.isCollapse = !this.isCollapse;
    },
    handleChange (val) {
    },
    // 地理编码检索
    searchName () {
      if (!this.judgeVal(this.gencoderKey)) {
        return;
      }
      let queryParams = {
        // 注意参数格式
        ds: JSON.stringify({
          // 关键字
          "keyWord": this.gencoderKey
        }),
        type: 'query',
        // 请更换自己的 tk，此 tk 只能在当前域名下使用
        tk: '9aa421bfac4b31f0ad91a7118973689d'
      };

      tdtGeocoder(queryParams).then(res => {
        if (res.status === '101') {
          this.gencoderResult = null;
          this.$message('没有检索到相关信息！！！');
          return;
        }
        this.gencoderResult = res.location;
      });

    },
    // 逆地理编码检索
    searchCoordinate () {
      if (!this.judgeVal(this.coordinateLon) || !this.judgeVal(this.coordinateLat)) {
        return;
      }
      let queryParams = {
        // 注意参数格式
        postStr: JSON.stringify({
          // 坐标
          "lon": this.coordinateLon,
          "lat": this.coordinateLat,
          "ver": 1
        }),
        type: 'geocode',
        // 请更换自己的 tk，此 tk 只能在当前域名下使用
        tk: '9aa421bfac4b31f0ad91a7118973689d',
      };

      tdtGeocoder(queryParams).then(res => {
        this.coordinateResult = res.result;
      });
    },
    // 行政区划检索
    searchGovernment () {
      // 为输入值，不检索
      if (!this.judgeVal(this.governmentValue)) {
        return;
      }
      let searchType;
      // 判断输入的是编码还是名称
      if (Object.is(parseInt(this.governmentValue), NaN)) {
        // 根据名称查询
        searchType = 1;
      } else {
        // 根据code查询
        searchType = 0;
      }
      let queryParams = {
        // 注意参数格式
        postStr: JSON.stringify({
          // 关键字
          "searchWord": this.governmentValue,
          // 0:行政区划名称，1:行政区划编码
          "searchType": searchType,
          // 子项
          "needSubInfo": 'false',
          // 所有属性
          "needAll": 'true',
          // 边界属性，好像是不起作用
          "needPolygon": 'true',
          "needPre": 'true',
        }),
        type: 'query',
        // 请更换自己的 tk，此 tk 只能在当前域名下使用
        tk: '9aa421bfac4b31f0ad91a7118973689d',
      };

      tdtAdmin(queryParams).then(res => {
        console.log(res)
        if (res.returncode === '101') {
          this.$message('没有检索到相关信息！！！');
          this.governmentResult = null;
          this.governmentChilds = null;
          return;
        }
        if (searchType === 0) {
          this.governmentResult = res.data;
        } else {
          this.governmentResult = res.data[0];
        }
        // 下一级行政区划按cityCode排序
        this.governmentChilds = this.governmentResult.child.sort((a1, a2) => {
          return parseInt(a1.cityCode) - parseInt(a2.cityCode);
        })
      }).catch(e => {
      })
    },
    // 地理编码定位
    gencoderLocation () {
      this.$emit('gencoderLocation', this.gencoderResult);
    },
    // 逆地里编码定位
    coordinateLocation () {
      this.$emit('coordinateLocation', this.coordinateResult);
    },
    // 行政区划定位
    governmentLocation () {
      this.$emit('governmentLocation', this.governmentResult);
    },
    // 判断字段有无
    judgeVal (val) {
      if (val && val.length > 0) {
        return true;
      }
      return false;
    },
    clearResult (val) {
      if (val === '1') {
        this.gencoderResult = null;
      } else if (val === '2') {
        this.coordinateResult = null;
      } else {
        this.governmentResult = null;
      }
    },
    // 选中
    selectCity (name) {
      this.governmentValue = name;
      this.searchGovernment();
    },
  }
}
</script>

<style lang="scss" scoped>
.senior-search-div {
  position: absolute;
  top: 0;
  z-index: 999;
  height: 100%;
}
.collapse-btn-div {
  position: absolute;
  right: -25px;
  top: 50%;

  .collapse-btn {
    width: 25px;
    height: 45px;
    padding: 0;
  }
}
.senior-search-div .el-menu-vertical-demo {
  background-color: rgba(255, 255, 255, 1);
  height: 100%;
  width: 0px;
  transition: all 0.3s linear(0, 1);
  overflow: auto;
  overflow-x: hidden;
}

.search-select-list {
  padding: 0.8em;
}

.search-select-list .search-input {
  margin-left: 30px;
}

.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 6px 0;
}

.city-childs-item {
  float: left;
  padding: 5px;
}
</style>